import React from 'react';
import "./Goods.less";
import { NavLink } from "react-router-dom";

const nav = [
    { id: 1, title: "猜你喜欢" },
    { id: 2, title: "今日特价" },
    { id: 3, title: "热卖推荐" },
    { id: 4, title: "橙心优选" }
]
function Goods(props) {
    let { showgoods, n, setN } = props;
    return (
        <div className="indexgoods">
            <nav>
                {
                    nav.map((item, index) => {
                        return <span key={item.id} className={index === n ? 'active' : ''} onClick={() => setN(index)}>{item.title}</span>
                    })
                }
            </nav>
            <ul>
                {
                    showgoods.map((item, index) => {
                        return (
                            <NavLink to={"/detail/"+item.id+"/1"} key={item.id}>
                                <li className={index % 2 === 0 ? 'item' : 'right'}>
                                    <img src={item.img} alt="" />
                                    <p>{item.goodsname}</p>
                                    <p>{item.description}</p>
                                    <b>&yen; {item.price}</b>
                                    <i>&yen; <del>{item.market_price}</del></i>
                                    <span></span>
                                </li>
                            </NavLink>
                        )
                    })
                }
            </ul>
        </div>
    )
}
export default React.memo(Goods);
